<template>
  <div class="wrapper">
    <div class="car-title-box">
      <div class="car-title"> 实时行驶车辆（辆）</div>
      <div class="car-number inline-block">
        <div v-for="(item, index) in carNumber" :key="index" class="mr-2 inline-block w-25px">
          <span :class="{ no_bg: item !== ',' }"> {{ item }}</span>
        </div>
      </div>
    </div>
    <div class="map-container" ref="myEchart" style="width: 450px; height: 450px; padding-left: 20%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import "../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
export default {
  name: 'chinaMap',
  props: {
    // option: {
    //     type: Object
    // },
    width: String,
    height: String,
  },
  data() {
    return {
      carNumber: '1,234,567'


    }
  },
  mounted() {
    this.initEachart()
    this.dealWithData()

  },
  methods: {

    initEachart() {
      this.myEchart = echarts.init(this.$refs.myEchart);
      var option = {
        tooltip: {
          show: false
        },
        geo: {
          map: "china",
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "10",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              borderColor: '#097bba',
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: '#2B91B7',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            color: ['#22e5e8', '#0035f9','#22e5e8'],
            itemStyle: {
              normal: {
                areaColor: "#0d0059",
                borderColor: "#097bba",
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "#2B91B7",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.myEchart.setOption(option);


      var dataValue = this.dealWithData();
      var data1 = dataValue.splice(0, 6);
      var option = {
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
             visualMap: {
                    min: 1000,
                    max: 40000,
                    inRange: {
                        color: ['#22e5e8', '#0035f9','#22e5e8']
                    },
                    silent: true,  // 取消交互，去除点击高亮的效果
                    seriesIndex: 0,   // 表示第一个series对象被渲染
                    show: false,   // 不展示图例
                    text: ['High', 'Low'],
                    calculable: true
                },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
             
                borderColor: "#097bba",
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "#2B91B7",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            data: dataValue,
            //   symbolSize: function(val) {
            //     return val[2] / 10;
            //   },
            symbol: "circle",
            symbolSize: 8,
            hoverSymbolSize: 10,
            tooltip: {
              formatter(value) {
                return value.data.name + "<br/>" + "设备数：" + "22";
              },
              show: true
            },
            encode: {
              value: 2
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            itemStyle: {
              color: "#0efacc"
            },
            emphasis: {
              label: {
                show: false
              }
            }
          },
          
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: data1,
            symbolSize: 15,
            tooltip: {
              show: false
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#0efacc",
              period: 9,
              scale: 5
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              color: "#0efacc",
              shadowBlur: 2,
              shadowColor: "#333"
            },
            zlevel: 1
          }
        ]
      };
      this.myEchart.setOption(option);



      //     var chartDom = document.getElementById('main');
      //    var myChart = echarts.init(chartDom);
      //  this.option && myChart.setOption(this.option);
    },
    dealWithData() {
      var geoCoordMap = {

        胶南: [119.97, 35.88],
        南通: [121.05, 32.08],
        拉萨: [91.11, 29.97],
        云浮: [112.02, 22.93],
        梅州: [116.1, 24.55],
        文登: [122.05, 37.2],

        丹东: [124.37, 40.13],
        太仓: [121.1, 31.45],
        曲靖: [103.79, 25.51],
        烟台: [121.39, 37.52],
        福州: [119.3, 26.08],
        瓦房店: [121.979603, 39.627114],
        即墨: [120.45, 36.38],
        抚顺: [123.97, 41.97],
        玉溪: [102.52, 24.35],
        张家口: [114.87, 40.82],
        阳泉: [113.57, 37.85],

        湛江: [110.359377, 21.270708],
        揭阳: [116.35, 23.55],
        荣成: [122.41, 37.16],
        连云港: [119.16, 34.59],
        葫芦岛: [120.836932, 40.711052],
        常熟: [120.74, 31.64],
        东莞: [113.75, 23.04],
        河源: [114.68, 23.73],
        淮安: [119.15, 33.5],
        泰州: [119.9, 32.49],
        南宁: [108.33, 22.84],
        营口: [122.18, 40.65],
        惠州: [114.4, 23.09],
        江阴: [120.26, 31.91],
        蓬莱: [120.75, 37.8],
        韶关: [113.62, 24.84],
        嘉峪关: [98.289152, 39.77313],
        广州: [113.23, 23.16],
        延安: [109.47, 36.6],
        太原: [112.53, 37.87],
        清远: [113.01, 23.7],
        中山: [113.38, 22.52],
        昆明: [102.73, 25.04],
        寿光: [118.73, 36.86],
        盘锦: [122.070714, 41.119997],
        长治: [113.08, 36.18],
        深圳: [114.07, 22.62],
        珠海: [113.52, 22.3],
        宿迁: [118.3, 33.96],
        咸阳: [108.72, 34.36],
        铜川: [109.11, 35.09],



      };
      var data = [];
      for (var key in geoCoordMap) {
        data.push({ name: key, value: geoCoordMap[key] });
      }
      return data;
    }

  }

}
</script>
<style scoped lang="less">
.content {
  position: relative;
}

.img {
  position: absolute;
  top: -19px;
  left: 119px;
  z-index: 2;
}

.clbox {
  position: relative;
  width: 100px;
  height: 100px;
}

.zxbox {
  position: relative;
  width: 300px;
  height: 300px;
}

.clsl {
  position: absolute;
  top: 43px;
  left: 58px;
}

.cl {
  position: absolute;
  top: 47px;
  left: 82px;
}

.zx {
  position: absolute;
  top: 47px;
  left: 82px;
}

.cltext {
  position: absolute;
  top: 60px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 14px;
  left: 201px;
}

.clnum {
  position: absolute;
  top: 81px;
  font-weight: 600;
  font-size: 22px;
  color: rgb(255, 255, 68);
  left: 201px;
}

.main-box {
  position: absolute;
  height: 380px;
  width: 380px;
  background-image: url("../assets/picture/bj-1.png"),
    url("../assets/picture/bj-2.png"), url("../assets/picture/bj-4.png"),
    url("../assets/picture/bj-3.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  z-index: 1;
  padding: 2px 4px 4px 2px; //设置padding给div往里挤
}

.main {
  height: 100%;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(32, 85, 139);
}

.chart {
  width: 100%;
  height: 100%;
  border-top: 1px solid rgb(209, 206, 206);
}
</style>